import React, { useMemo, useState, useEffect } from 'react';
import { Title, Ret, KSwitch, cline, uReal, useKForm, useHigh, useCmd, WaitUmd, MainView, KFind, ck_empty, obj_empty, KSelect,
    adjust_val, is_empty, filter_row, obj_str, GridTable, save_data, PanelTitle, Btn, loc } from 'sui';
import { User } from 'cache';

const GatherView = ({ hreturn, lst_tech }) => {
    const [main, setMain] = useState();
    const [cur, setCur] = useState();
    const [high] = useHigh(252, 100);
    const umd = useCmd();
    const form = useKForm();

    useEffect(() => {
        setMain(null);
        setCur(null);
    }, []);

    const filteredRows = useMemo(() => {
        if (!cur) {
            return null;
        }

        const data = cur["data"];
        if (is_empty(data)) {
            return null;
        }

        const lst = ["psn", "width", "dt", "dia"];

        return filter_row(data, lst, umd.filter);
    }, [cur, umd.filter]);

    const hCalc = () => {
        const ck = {
            tsn : v => ck_empty(v),
        };

        if (form.isErr(ck)) {
            return;
        }

        umd.startWait();

        const opt = {
            tsn: form.get("tsn"),
        };

        const pbox = form.get("pbox");
        if (pbox === "Y") {
            opt["pbox"] = true;
            opt["usn"] = User.userName();
        }

        uReal(null, "pair/nodata",
            {
                line: cline(),
                ...opt,
            },
            r => {
                if (r.inner) {
                    r.inner.forEach((d, i) => {
                        adjust_val(d, true);
                        d["index"] = i + 1;
                    });
                }

                if (r.outer) {
                    r.outer.forEach((d, i) => {
                        adjust_val(d, true);
                        d["index"] = i + 1;
                    });
                }

                setMain(r);
                umd.endWait();
            }, e => umd.setErr(loc("l_196")));
    };

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_810"), key: 'sn', width: 100},
        {name: loc("l_805"), key: 'width', width: 100},
        {name: loc("l_806"), key: 'dt', width: 100},
        {name: loc("l_807"), key: 'dia', width: 100},
    ];

    const lst = [
        {sn: "inner", name: loc("l_784")},
        {sn: "outer", name: loc("l_783")},
    ];

    const hout = () => {
        if (!cur) {
            return;
        }

        const data = cur["data"];
        if (is_empty(data)) {
            return;
        }

        const tp = cur["tp"];
        const f = lst.find(d => d.sn === tp);
        if (!f) {
            return;
        }

        const name = obj_str(f, "name");

        save_data(data, col, name, umd);
    };

    const hDone = () => {
        const tp = form.get("tp");

        const ck = {
            tp: v => ck_empty(v),
        };

        if (form.isErr(ck)) {
            return;
        }

        setCur({
            tp: tp,
            data: main[tp],
        });
    };

    const getView = () => {
        if (obj_empty(main)) {
            return null;
        }

        const Left = () => (
            <div className="flex flex-row">
                <KSelect label={loc("l_229")} form={form} name="tp" mg="dense" width="w-56" className="mr-4 mt-2" lst={lst}/>
                <Btn className="ml-4" hcmd={hDone}>{loc("l_551")}</Btn>
                <Btn className="ml-4" hcmd={hout}>{loc("l_298")}</Btn>
            </div>
        );

        return (
            <>
            <PanelTitle left={<Left/>} cl="green"/>
            <GridTable col={col} row={filteredRows} high={high - 40}/>
            </>
        );
    };

    const Right = () => (
        <div className="inline-flex mr-3 items-center">
            <KSwitch form={form} name="pbox" className="ml-2 mr-4">{loc("l_799")}</KSwitch>
            <Ret hcmd={hreturn}/>
        </div>
    );

    const Left = () => <Title mod={loc("l_782")} sub={loc("l_804")}/>;

    return (
        <MainView>
            <PanelTitle left={<Left/>} cl="gray" right={<Right/>}>
                <div className="inline-flex items-center">
                    <Btn className="mr-4 mb-4 mt-4" hcmd={hCalc}>{loc("l_701")}</Btn>
                    <KFind label={loc("l_694")} form={form} name="tsn" margin="dense" width="w-56" list={lst_tech}/>
                </div>
            </PanelTitle>
            {getView()}
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {GatherView};
